<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">库存首页</el-breadcrumb-item>
    <el-breadcrumb-item>单品库存列表
    </el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input placeholder="请输入内容" v-model="queryInfo.name"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="queryInfo.dictionary_id" placeholder="请选择物品类型" @change="getListByBigCate($event.target.value)">
          <el-option label="全部" value="0"></el-option>
          <el-option
            v-for="item in bigCateList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script>
export default {
name: "Category",
  data() {
    return {
      queryInfo: {
        bigCate_id: 0,
        smallCate_id: 0,
      },
      bigCateList: [],
      smallCateList: []
    };
  },
  created() {
    this.getBigCateList();
  },
  methods:{
    async getBigCateList() {
      const { data: res } = await this.$http.get('dictionaryList', {
        params: {type_id: 1}
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取物品类型列表失败！')
      }
      this.bigCateList = res.data.data
    },
    getListByBigCate(id) {
      this.queryInfo.bigCate_id = id;
      this.getList()
    },
    async getList() {
      const { data: res } = await this.$http.get('inboundList', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取人员列表失败！')
      }
      this.tableData = res.data.data
      this.total = res.data.total
    }
  }
}
</script>

<style scoped>

</style>
